<template>
<div class="upload-box">
    <el-upload class="sssss" action="#" list-type="picture-card" :file-list="fileList" multiple :before-upload="beforeAvatarUpload" :on-change="handleChange" ref='uploadFile' accept=".png,.jpg,.jpeg">
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
            <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                    <i class="el-icon-delete"></i>
                </span>
            </span>
        </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
</div>
</template>

<script>
export default {
    //baseUrl+ruleForm.picUrl  file.url
    //双向数据绑定子父
    props: {
        ruleForm: {
            type: Object,
            default () {
                return {};
            },
        },
        urlName: {
            type: String,
            default () {
                return "url";
            },
        },
    },
    data() {
        return {
            dialogImageUrl: "",
            //控制图片是否课件
            dialogVisible: false,
            //控制按钮是否课件
            disabled: false,
            fileList: [],
        };
    },
    computed: {
        //图片获取根路径
        baseUrl() {
            return this.$store.state.PortalManagement.fileIp;
        },
    },
    methods: {
        //图片上传的方法
        handleChange(file, fileList) {
            console.log(file, fileList);
            //上传限制
            const isLt2M = file.size / 1200 / 1024 < 10;
            var FileExt = file.name.replace(/.+\./, "");
            if (!isLt2M) {
                this.$message.error("上传头像图片大小需小于10MB");
                this.fileList = []

            } else if (["jpg", "png", "jpeg"].indexOf(FileExt.toLowerCase()) === -1) {
                this.$message.error("请上传后缀名为jpg、png、jpeg的图片！");
                this.fileList = []
            } else {
                const formData = new FormData();
                //在file里面追加一个对象
                formData.append("file", file.raw);
                // console.log(formData, 111)
                this.Api.uploadImage(formData).then((res) => {
                    console.log(res, "图片上传")
                    var data = {
                        ...this.ruleForm,
                        picUrl: res.data.url,
                        pic: res.data.url
                    };
                    // console.log(res, 111);
                    this.$emit("update:ruleForm", data);

                }).catch(res => {
                    // console.log(res, "失败")
                    this.fileList = []
                });
            }

        },
        handleRemove(file) {
            this.fileList = [];

            // console.log(file);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        //图片上传限定图片类型
        beforeAvatarUpload(file) {
            // console.log("tupian上传大小限制")
            // const isJPG = file.type === "png/jpeg/jpg";
            const isLt2M = file.size / 1200 / 1024 < 10;

            // if (!isJPG) {
            //     this.$message.error("上传图片只能是png/jpeg/jpg格式!");
            // }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小需小于10MB");
            }
            return isLt2M;
        },
    },
};
</script>

<style lang="less" scoped>
/deep/.el-upload--picture-card {
    width: 66px;
    height: 66px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/deep/.el-upload-list__item {
    width: 66px;
    height: 66px;
    margin-right: 0px;
}

/deep/.el-icon-zoom-in {
    font-size: 10px;
}

/deep/.el-icon-delete {
    font-size: 10px;
}

.upload-box {
    width: 66px;
    height: 66px;
    overflow: hidden;

    ul {
        li {
            div {
                >span {
                    display: flex;
                }
            }
        }
    }
}

/deep/.el-upload-list__item-actions {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
